<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<body>
<script th:src="@{/js/wbm/manifest.js}"></script>
<script th:src="@{/lib/echarts/echarts.min.js}"></script>
<style>
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";

    }

    .clearfix:after {
        align-content: center;
        clear: both
    }

    .span-font {
        background-color: #fbfdff;
        color: #97a8be;
        vertical-align: middle;
        display: table-cell;
        position: relative;
        width: 1%;
        font-size: 13px;
        text-align: right;
        padding-right: 5px;
        white-space: nowrap;
    }

    .span-font-center {
        background-color: #fbfdff;
        color: #97a8be;
        vertical-align: middle;
        display: table-cell;
        position: relative;
        width: 1%;
        font-size: 13px;
        text-align: center;
        white-space: nowrap;
    }

    .span-size-center {
        background-color: #fbfdff;
        color: #97a8be;
        vertical-align: middle;
        display: table-cell;
        position: relative;
        width: 1%;
        font-size: 13px;
        text-align: right;
        padding-right: 5px;
        white-space: nowrap;
        height: 30px;
    }

    .my-autocomplete li {
        line-height: normal;
        padding: 7px;
    }

    .my-autocomplete li .name {
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .my-autocomplete li .addr {
        font-size: 12px;
        color: #b4b4b4;
    }

    .my-autocomplete li .highlighted .addr {
        color: #ddd;
    }


</style>

<div id="manifest" style="margin: 10px 10px 10px 10px">
    <el-col :span="22">
        <el-row>
            <el-form :model="infoForm" ref="infoForm" label-width="110px">
                <el-col :span="8">
                    <el-card :body-style="{ padding: '0px' }">
                        <div slot="header" class="clearfix">
                            <span> Routing Config</span>
                        </div>
                        <div style="padding: 14px;">
                            <el-col :span="18">
                                <el-radio-group :disabled="disabled" v-model="radio2" @change="radioChange">
                                    <el-row>
                                        <el-radio :label="1">A=>B</el-radio>
                                    </el-row>
                                    <el-row style="margin-top: 20px;">
                                        <el-radio :label="2">A=>B</el-radio>
                                        <el-radio :label="3">B=>C</el-radio>
                                    </el-row>
                                    <el-row style="margin-top: 20px;">
                                        <el-radio :label="4">A=>B</el-radio>
                                        <el-radio :label="5">B=>C</el-radio>
                                        <el-radio :label="6">C=>D</el-radio>
                                    </el-row>
                                </el-radio-group>
                            </el-col>
                            <el-col :span="6">
                                <el-row>
                                    <el-input v-if="showSegmentA_B" size="small"
                                              v-model="infoForm.segmentA">
                                        <template slot="prepend">A</template>
                                    </el-input>
                                </el-row>
                                <el-row>
                                    <el-input v-if="showSegmentA_B" size="small"
                                              v-model="infoForm.segmentB">
                                        <template slot="prepend">B</template>
                                    </el-input>
                                </el-row>
                                <el-row>
                                    <el-input v-if="showSegmentA_B_C" size="small"
                                              v-model="infoForm.segmentC">
                                        <template slot="prepend">C</template>
                                    </el-input>
                                </el-row>
                                <el-row>
                                    <el-input v-if="showSegmentA_B_C_D" size="small"
                                              v-model="infoForm.segmentD">
                                        <template slot="prepend">D</template>
                                    </el-input>
                                </el-row>
                            </el-col>
                        </div>
                    </el-card>
                </el-col>
            </el-form>
            <el-col :span="16">
                <el-card :body-style="{ padding: '0px' }" style="margin-left: 10px;">
                    <div slot="header" class="clearfix">
                        <span>航班信息配置</span>
                    </div>
                    <div style="padding: 14px;">
                        <el-form :model="infoForm" ref="infoForm" label-width="110px">
                            <el-row>
                                <el-col :span="8">
                                    <el-row>
                                        <el-col :span="8">
                                            <span class="span-size-center">Flight NO</span>
                                        </el-col>
                                        <el-col :span="16">
                                            <el-autocomplete size="small"
                                                             popper-class="my-autocomplete"
                                                             v-model="flightNo"
                                                             :fetch-suggestions="querySearch"
                                                             custom-item="my-item-zh"
                                                             placeholder="请输入航班号"
                                                             @select="handleInfoSelect"
                                                             icon="search"
                                            ></el-autocomplete>
                                        </el-col>
                                    </el-row>
                                    <el-row style="margin-top: 5px;">
                                        <el-col :span="8">
                                            <span class="span-size-center">Route Name</span>
                                        </el-col>
                                        <el-col :span="16">
                                            <el-input size="small"
                                                      v-model="infoForm.segment">
                                            </el-input>
                                        </el-col>
                                    </el-row>
                                    <el-row style="margin-top: 5px;">
                                        <el-col :span="8">
                                            <span class="span-size-center">Route Name</span>
                                        </el-col>
                                        <el-col :span="16">
                                            <el-input size="small"
                                                      v-model="infoForm.segment">
                                            </el-input>
                                        </el-col>
                                    </el-row>
                                    <el-row style="margin-top: 5px;margin-bottom: 5px;">
                                        <el-col :span="8">
                                            <span class="span-size-center">Crew</span>
                                        </el-col>
                                        <el-col :span="4" v-for="crew in infoForm.crews">
                                            <el-input size="small"
                                                      v-model.number="crew.standardNum">
                                            </el-input>
                                        </el-col>
                                    </el-row>
                                    <el-row style="margin-top: 5px;margin-bottom: 5px;">
                                        <el-col :span="8">
                                            <span class="span-size-center">Galley Goods</span>
                                        </el-col>
                                        <el-col :span="8" v-for="galleyGood in infoForm.galleyGoods">
                                            <el-input size="small"
                                                      v-model.number="galleyGood.standardWeight"></el-input>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="8">
                                    <el-row>
                                        <el-col :span="12">
                                            <span class="span-size-center">AC Reg</span>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-autocomplete size="small"
                                                             popper-class="my-autocomplete"
                                                             v-model="infoForm.msn"
                                                             :fetch-suggestions="querySearchFc"
                                                             custom-item="my-item-zh"
                                                             placeholder="请输入机号"
                                                             @select="handleSelect"
                                                             icon="search"
                                            ></el-autocomplete>
                                        </el-col>
                                    </el-row>
                                    <el-row style="margin-top: 5px;">
                                        <el-col :span="12">
                                            <span class="span-size-center">AC type</span>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-input size="small"
                                                      v-model="infoForm.flightType" readonly>
                                            </el-input>
                                        </el-col>
                                    </el-row>
                                    <el-row style="margin-top: 5px;">
                                        <el-col :span="12">
                                            <span class="span-size-center">SeatNum Type</span>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-input size="small"
                                                      v-model="infoForm.seatNum" readonly>
                                            </el-input>
                                        </el-col>
                                    </el-row>
                                    <el-row style="margin-top: 5px;">
                                        <el-col :span="12">
                                            <span class="span-size-center">Basic Weight</span>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-input size="small"
                                                      v-model="infoForm.baseWeight" readonly>
                                            </el-input>
                                        </el-col>
                                    </el-row>
                                    <el-row style="margin-top: 5px;margin-bottom: 5px;">
                                        <el-col :span="12">
                                            <span class="span-size-center">Basic Index</span>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-input size="small"
                                                      v-model="infoForm.baseIndex" readonly>
                                            </el-input>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="8">
                                    <el-row style="margin-left: 5px;">
                                        <el-col :span="12">
                                            <span class="span-size-center">Limited MTOW</span>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-input size="small"
                                                      v-model="infoForm.limitedMtow" readonly>
                                            </el-input>
                                        </el-col>
                                    </el-row>
                                    <el-row style="margin-top: 5px;">
                                        <el-col :span="12">
                                            <span class="span-size-center">Limited MLDW</span>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-input size="small"
                                                      v-model="infoForm.limitedMldw" readonly>
                                            </el-input>
                                        </el-col>
                                    </el-row>
                                    <el-row style="margin-top: 5px;">
                                        <el-col :span="12">
                                            <span class="span-size-center">Limited MZFW</span>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-input size="small"
                                                      v-model="infoForm.limitedMzfw" readonly>
                                            </el-input>
                                        </el-col>
                                    </el-row>
                                    <el-row style="margin-top: 5px;">
                                        <el-col :span="12">
                                            <span class="span-size-center">Takeoff Fuel</span>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-input size="small"
                                                      v-model="infoForm.takeOffFuel" readonly>
                                            </el-input>
                                        </el-col>
                                    </el-row>
                                    <el-row style="margin-top: 5px;margin-bottom: 5px;">
                                        <el-col :span="12">
                                            <span class="span-size-center">Trip Fuel</span>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-input size="small"
                                                      v-model.number="infoForm.tripFuel" readonly>
                                            </el-input>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                </el-card>
            </el-col>

        </el-row>
        <el-row style="margin-top: 10px;">
            <el-col :span="24">
                <el-card :body-style="{ padding: '0px' }" style="margin-left: 10px;" v-if="showCargoAndCabin">
                    <div style="padding: 14px;">
                        <el-form :model="cabinsForm" ref="cabinsForm" label-width="110px">
                            <el-row>
                                <el-col :span="6" v-for="(segment,index) in cabinsForm.passengerCabins">
                                    <el-card :body-style="{ padding: '0px' }"
                                             style="margin-left: 10px;margin-top: 10px;">
                                        <el-tag v-if="index==0" type="danger">
                                            <span v-if="radio2==1">{{infoForm.segmentA}}-{{infoForm.segmentB}}</span>
                                            <span v-if="radio2==2">{{infoForm.segmentA}}-{{infoForm.segmentB}}</span>
                                            <span v-if="radio2==3">{{infoForm.segmentA}}-{{infoForm.segmentC}}</span>
                                            <span v-if="radio2==4">{{infoForm.segmentA}}-{{infoForm.segmentB}}</span>
                                            <span v-if="radio2==5">{{infoForm.segmentA}}-{{infoForm.segmentC}}</span>
                                            <span v-if="radio2==6">{{infoForm.segmentA}}-{{infoForm.segmentD}}</span>
                                        </el-tag>
                                        <el-tag v-else-if="index==1" type="danger">
                                            <span v-if="radio2==2">{{infoForm.segmentA}}-{{infoForm.segmentC}}</span>
                                            <span v-if="radio2==3">{{infoForm.segmentB}}-{{infoForm.segmentC}}</span>
                                            <span v-if="radio2==4">{{infoForm.segmentA}}-{{infoForm.segmentC}}</span>
                                            <span v-if="radio2==5">{{infoForm.segmentA}}-{{infoForm.segmentD}}</span>
                                            <span v-if="radio2==6">{{infoForm.segmentB}}-{{infoForm.segmentD}}</span>
                                        </el-tag>
                                        <el-tag v-else-if="index==2" type="danger">
                                            <span v-if="radio2==4">{{infoForm.segmentA}}-{{infoForm.segmentD}}</span>
                                            <span v-if="radio2==5">{{infoForm.segmentB}}-{{infoForm.segmentC}}</span>
                                            <span v-if="radio2==6">{{infoForm.segmentC}}-{{infoForm.segmentD}}</span>
                                        </el-tag>
                                        <el-tag v-else-if="index==3" type="danger">
                                            <span v-if="radio2==5">{{infoForm.segmentB}}-{{infoForm.segmentD}}</span>
                                        </el-tag>
                                        <el-row v-for="(rowData,rowIndex) in segment">
                                            <el-row v-for="(rowData2,rowIndex2) in rowData">
                                                <el-col :span="6" v-for="(colData,colIndex) in rowData2.aircraftCabin">
                                                <span class="span-font" v-if="rowIndex2==0&&colIndex==0">
                                                    &nbsp;
                                                </span>
                                                    <span class="span-font-center"
                                                          v-else-if="rowIndex2==0&&colIndex!=0">
                                                    {{colData.name}}
                                                </span>
                                                    <span class="span-font" v-else-if="rowIndex2!=0&&colIndex==0">
                                                    {{rowData2.cabinType}}
                                                </span>
                                                    <el-input size="small"
                                                              v-model.number="cabinsForm.passengerCabins[index][rowIndex][rowIndex2].aircraftCabin[colIndex].value"
                                                              v-else>
                                                    </el-input>
                                                </el-col>
                                            </el-row>
                                        </el-row>
                                    </el-card>
                                </el-col>
                            </el-row>

                        </el-form>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-card :body-style="{ padding: '0px' }" style="margin-left: 10px;" v-if="showCargoAndCabin">
                    <el-form :model="cargoHoldForm" ref="cargoHoldForm" label-width="110px">
                        <el-row>
                            <el-col :span="6" v-for="(segment,index) in cargoHoldForm.cargos">
                                <el-card :body-style="{ padding: '0px' }" style="margin-left: 10px;margin-top: 10px;">
                                    <el-tag v-if="index==0" type="danger">
                                        <span v-if="radio2==1">{{infoForm.segmentA}}-{{infoForm.segmentB}}</span>
                                        <span v-if="radio2==2">{{infoForm.segmentA}}-{{infoForm.segmentB}}</span>
                                        <span v-if="radio2==3">{{infoForm.segmentA}}-{{infoForm.segmentC}}</span>
                                        <span v-if="radio2==4">{{infoForm.segmentA}}-{{infoForm.segmentB}}</span>
                                        <span v-if="radio2==5">{{infoForm.segmentA}}-{{infoForm.segmentC}}</span>
                                        <span v-if="radio2==6">{{infoForm.segmentA}}-{{infoForm.segmentD}}</span>
                                    </el-tag>
                                    <el-tag v-else-if="index==1" type="danger">
                                        <span v-if="radio2==2">{{infoForm.segmentA}}-{{infoForm.segmentC}}</span>
                                        <span v-if="radio2==3">{{infoForm.segmentB}}-{{infoForm.segmentC}}</span>
                                        <span v-if="radio2==4">{{infoForm.segmentA}}-{{infoForm.segmentC}}</span>
                                        <span v-if="radio2==5">{{infoForm.segmentA}}-{{infoForm.segmentD}}</span>
                                        <span v-if="radio2==6">{{infoForm.segmentB}}-{{infoForm.segmentD}}</span>
                                    </el-tag>
                                    <el-tag v-else-if="index==2" type="danger">
                                        <span v-if="radio2==4">{{infoForm.segmentA}}-{{infoForm.segmentD}}</span>
                                        <span v-if="radio2==5">{{infoForm.segmentB}}-{{infoForm.segmentC}}</span>
                                        <span v-if="radio2==6">{{infoForm.segmentC}}-{{infoForm.segmentD}}</span>
                                    </el-tag>
                                    <el-tag v-else-if="index==3" type="danger">
                                        <span v-if="radio2==5">{{infoForm.segmentB}}-{{infoForm.segmentD}}</span>
                                    </el-tag>
                                    <el-row v-for="(rowData,rowIndex) in segment">
                                        <el-row v-for="(rowData2,rowIndex2) in rowData">
                                            <el-col :span="4" v-for="(colData,colIndex) in rowData2.aircraftCabin">
                                                <span class="span-font" v-if="rowIndex2==0&&colIndex==0">
                                                &nbsp;
                                                </span>
                                                <span class="span-font-center" v-else-if="rowIndex2==0&&colIndex!=0">
                                                    {{colData.name}}
                                                </span>
                                                <span class="span-font" v-else-if="rowIndex2!=0&&colIndex==0">
                                                {{rowData2.holtType}}
                                                </span>
                                                <!--<el-form-item label-width="1px"-->
                                                <!--:prop="'cargoHoldForm.cargos[' + index + ']['rowIndex']['+rowIndex2+'].aircraftCabin['+colIndex+'].value'"-->
                                                <!--:rules="[{-->
                                                <!--required: true, message: '不能为空',-->
                                                <!--},{ type: 'number', message: '必须为数字值',trigger: 'blur'}]" v-else>-->
                                                <el-input size="small"
                                                          v-model.number="cargoHoldForm.cargos[index][rowIndex][rowIndex2].aircraftCabin[colIndex].value"
                                                          v-else>
                                                </el-input>
                                                <!--</el-form-item>-->
                                            </el-col>
                                            <el-col :span="4" v-if="rowIndex2==0">
                                                <span class="span-font" v-if="rowIndex2==0">
                                                    FS
                                                </span>
                                            </el-col>
                                            <el-col :span="4" v-else>
                                                <el-input size="small"
                                                          v-model.number="cargoHoldForm.cargos[index][rowIndex][rowIndex2].fullScale">
                                                </el-input>
                                            </el-col>
                                        </el-row>

                                        <el-col :span="4" v-if="rowIndex==0">
                                                <span class="span-font" v-if="rowIndex==0">
                                                    FS
                                                </span>
                                        </el-col>

                                    </el-row>
                                </el-card>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
        <el-row>
            <el-card :body-style="{ padding: '0px' }" style="margin-left: 10px;">
                <div slot="header" class="clearfix">
                    <span>区域</span>
                </div>
                <el-row>
                    <el-col :span="10">
                        <div v-html="showFtl" style="padding: 14px; margin-left: 1%">
                        </div>
                    </el-col>
                    <el-col :span="14">
                        <el-row>
                            <div id="loadAndTrimSheet" style="padding: 14px;width: 460px;height: 450px;">
                            </div>
                        </el-row>
                        <el-row>
                            <div v-html="checkResultData"></div>
                        </el-row>
                    </el-col>
                </el-row>
            </el-card>
        </el-row>
    </el-col>

    <el-col :span="2">
        <el-card :body-style="{ padding: '0px' }" style="margin-left: 10px;">
            <div slot="header" class="clearfix">
                <span>区域</span>
            </div>
            <div style="padding: 14px; margin-left: 1%">
                <el-row :span="4">
                    <el-input size="small" v-model="cargoHoldForm.name">
                    </el-input>
                </el-row>
                <el-row :span="4">
                    <el-input size="small" v-model="cargoHoldForm.name">
                    </el-input>
                </el-row>
            </div>
        </el-card>

        <el-card :body-style="{ padding: '0px' }" style="margin-left: 10px;margin-top: 20px;">
            <div slot="header" class="clearfix">
                <span>区域</span>
            </div>
            <div style="padding: 14px; margin-left: 1%">
                <span>Spring V1.0.0</span>
            </div>
        </el-card>
        <el-card :body-style="{ padding: '0px' }" style="margin-left: 10px;margin-top: 20px;">
            <div slot="header" class="clearfix">
                <span>操作</span>
            </div>
            <div style="padding: 14px; margin-left: 1%">
                <el-button type="primary" @click="submitManifest" icon="search">提交</el-button>
            </div>
        </el-card>
    </el-col>

</div>

</body>
</html>